<template>
  <view class="help-detail">
    <view class="detail-header">
      <view class="detail-title">{{ helpInfo.title }}</view>
      <view class="detail-info">
        <view class="detail-time">{{ helpInfo.createTime }}</view>
        <view class="detail-hits">{{ helpInfo.hits }}次浏览</view>
      </view>
    </view>
    
    <view class="detail-content" v-html="helpInfo.content"></view>
    
    <view class="related-helps" v-if="relatedHelps && relatedHelps.length > 0">
      <view class="related-title">相关帮助</view>
      <view class="related-list">
        <view class="related-item" v-for="(help, index) in relatedHelps" :key="index" 
              @click="goHelpDetail(help.id)">
          <el-icon name="arrow-right"></el-icon>
          <view class="related-text">{{ help.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      helpId: '',
      helpInfo: {},
      relatedHelps: []
    }
  },
  onLoad(options) {
    this.helpId = options.id
    this.getHelpDetail()
  },
  methods: {
    async getHelpDetail() {
      try {
        const res = await this.$api.get(`/help/detail/${this.helpId}`)
        this.helpInfo = res
        
        // 获取相关帮助
        const relatedRes = await this.$api.get('/help/related', {
          categoryId: res.categoryId,
          excludeId: this.helpId,
          pageSize: 5
        })
        
        this.relatedHelps = relatedRes.list
      } catch (error) {
        this.$toast.fail(error.message || '获取帮助详情失败')
      }
    },
    goHelpDetail(id) {
      uni.navigateTo({
        url: `/pages/help/detail?id=${id}`
      })
    }
  }
}
</script>

<style>
.help-detail {
  background-color: #fff;
  min-height: 100vh;
  padding: 15px;
}
.detail-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.detail-title {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
}
.detail-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}
.detail-time {
  margin-right: 15px;
}
.detail-content {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 30px;
}
.detail-content img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}
.related-helps {
  padding-top: 15px;
  border-top: 1px solid #eee;
}
.related-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
}
.related-list {
  padding-left: 15px;
}
.related-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.related-item .el-icon {
  font-size: 12px;
  color: #999;
  margin-right: 5px;
}
.related-text {
  font-size: 14px;
  color: #333;
}
</style>    